<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
    <div id="app" class="container">
      <form class="form-horizontal">

          <div class="form-group">
              <div class="col-sm-12">
                  <input type="text" v-model="name" class="form-control" id="inputEmail3" placeholder="书名">
              </div>
          </div>
      </form>
      <div class="text-center">
          <button class="btn btn-primary" @click="add">添加</button>
      </div>
      <hr>
      <table class="table table-hover table-bordered text-center">
          <thead>
              <tr>
                  <th class="text-center">id</th>
                  <th class="text-center">书名</th>
                  <th class="text-center">添加时间</th>
                  <th class="text-center">操作</th>
              </tr>
          </thead>
          <tbody>
              <!-- 2.遍历数据  -->
              <tr v-for="(item,index) in arr">
                  <td>{{index+1}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.time}}</td>
                  <td>
                      <button class="btn btn-danger" @click="del(index)">删除</button>
                  </td>
              </tr>
              <tr v-if="arr.length===0">
                <td colspan="4" class="text-center">暂无数据</td>
            </tr>
          </tbody>
      </table>
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>
            let vm = new Vue({
            el: "#app",
            //属性 -变量
            data: {
                // 初始化列表数据 
                arr: [
                    {
                        name:"三国演义",
                        time:"2021/1/28",
                    },
                    {
                        name:"红楼梦",
                        time:"2021/1/28",
                    },
                    {
                        name:"水浒传",
                        time:"2021/1/28",
                    },
                    {
                        name:"西游记",
                        time:"2021/1/28",
                    }
                ],
                // 初始化表单的数据 
                name: ""
            },
            // 方法-函数
            methods: {
                // 添加 
                add() {
                    this.arr.push({
                        name: this.name,
                        time: new Date().toLocaleDateString()
                    })
                    //表单数据清空
                    this.name="";
                },
                // 删除
                del(index) {
                    this.arr.splice(index, 1)
                }
            }
        })
</script>